<template>
  <div class="system-wallet-h5">
    <header class="system-wallet-h5__header">
      <h3>{{ t("WALLET.Wallet") }}</h3>
      <h4 @click="openCapitalRecordH5"><IAntDesignTransactionOutlined />{{ t("WALLET.Transaction") }}</h4>
    </header>
    <Wallet />
  </div>
  <Dialog
    v-model:visible="dialogConfig.show"
    v-model:title="dialogConfig.title"
    v-model:autoHeight="dialogConfig.autoHeight"
    :width="dialogConfig.width"
    :headerFixed="dialogConfig.headerFixed"
    :hiddenTitle="dialogConfig.hiddenTitle"
  >
    <CapitalRecordH5 v-model:title="dialogConfig.title" @back="goBack"/>
  </Dialog>
</template>

<script setup lang="ts" name="Me">
import nocache from '@/store/nocache';

const piniaNocache:any = nocache();
const { t } = useI18n();

const data:any = reactive({
  dialogConfig: {
    show: false,
    type: '',
    title: "",
    headerFixed: false,
    width: "100%",
    hiddenTitle: true,
    autoHeight: false
  },
});

const {
  dialogConfig
} = toRefs(data);

const openCapitalRecordH5 = () => {
  dialogConfig.value.show = true;
  dialogConfig.value.title = t('WALLET.Transaction');
}

const goBack = () => {
  dialogConfig.value.show = false;
}

onMounted(()=>{
  piniaNocache.setIsOpenHeader(false);
});

onUnmounted(()=>{
  piniaNocache.setIsOpenHeader(true);
});
</script>

<style lang="scss" scoped>
@import url(./index.scss);
</style>
